<template>
  <div class="drawer-container">
    <div class="drawer-title">
      <h4>系统布局配置</h4>
      <span>实时预览，点击拷贝配置</span>
    </div>

    <div class="drawer-item">
      <span>主题色</span>
      <span class="comp-style">
        <el-color-picker
          v-model="theme.primaryColor"
          :predefine="predefineColors"
          @change="themeChange"
        />
      </span>
    </div>

    <div class="drawer-item">
      <span>布局方式</span>
      <div class="layout-box">
        <div
          v-for="item in layoutOptions"
          :key="item.value"
          :class="['layout-item', { active: layout === item.value }]"
          @click="handleLayoutChange(item.value)"
        >
          <div class="layout-preview">
            <component :is="item.icon" />
          </div>
          <span>{{ item.label }}</span>
        </div>
      </div>
    </div>

    <el-divider />

    <div class="drawer-item">
      <span>固定头部</span>
      <span class="comp-style">
        <el-switch
          v-model="theme.fixedHeader"
          class="drawer-switch"
        />
      </span>
    </div>

    <div class="drawer-item">
      <span>显示标签页</span>
      <span class="comp-style">
        <el-switch
          v-model="theme.showTabs"
          class="drawer-switch"
        />
      </span>
    </div>

    <div class="drawer-item">
      <span>显示面包屑</span>
      <span class="comp-style">
        <el-switch
          v-model="theme.showBreadcrumb"
          class="drawer-switch"
        />
      </span>
    </div>

    <div class="drawer-item">
      <span>固定侧边栏</span>
      <span class="comp-style">
        <el-switch
          v-model="theme.fixedSidebar"
          class="drawer-switch"
        />
      </span>
    </div>

    <el-divider />

    <div class="drawer-item">
      <el-button size="small" type="primary" @click="saveSetting">
        <el-icon><Check /></el-icon>
        保存配置
      </el-button>
      <el-button size="small" @click="resetSetting">
        <el-icon><RefreshRight /></el-icon>
        重置配置
      </el-button>
    </div>

    <el-divider />

    <div class="drawer-item">
      <el-alert
        title="配置仅在当前会话生效，如需持久化请点击保存配置"
        type="warning"
        :closable="false"
        show-icon
        style="margin-top: 16px;"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { ElMessage } from 'element-plus'
import { Check, RefreshRight, Grid, Menu as MenuIcon, Monitor } from '@element-plus/icons-vue'
import { useAppStore } from '@/stores/app'

const appStore = useAppStore()

// 预定义颜色
const predefineColors = [
  '#409EFF',
  '#1890ff',
  '#304156',
  '#212121',
  '#11a983',
  '#13c2c2',
  '#6959CD',
  '#f5222d'
]

// 布局选项
const layoutOptions = [
  { label: '垂直布局', value: 'vertical', icon: MenuIcon },
  { label: '水平布局', value: 'horizontal', icon: Monitor },
  { label: '混合布局', value: 'mix', icon: Grid }
]

// 主题配置
const theme = computed(() => ({
  primaryColor: appStore.primaryColor,
  fixedHeader: appStore.fixedHeader,
  showTabs: appStore.showTabs,
  showBreadcrumb: appStore.showBreadcrumb,
  fixedSidebar: appStore.fixedSidebar
}))

const layout = computed(() => appStore.layout)

// 主题色改变
const themeChange = (val: string) => {
  appStore.setPrimaryColor(val)
}

// 布局改变
const handleLayoutChange = (layout: string) => {
  appStore.layout = layout as any
}

// 保存设置
const saveSetting = () => {
  const settings = {
    primaryColor: theme.value.primaryColor,
    layout: layout.value,
    fixedHeader: theme.value.fixedHeader,
    showTabs: theme.value.showTabs,
    showBreadcrumb: theme.value.showBreadcrumb,
    fixedSidebar: theme.value.fixedSidebar
  }

  localStorage.setItem('layout-setting', JSON.stringify(settings))
  ElMessage.success('配置已保存到本地存储')
}

// 重置设置
const resetSetting = () => {
  localStorage.removeItem('layout-setting')
  // 重置为默认配置并即时生效（无需整页刷新）
  appStore.setPrimaryColor('#409EFF')
  appStore.layout = 'vertical'
  appStore.fixedHeader = true
  appStore.showTabs = true
  appStore.showBreadcrumb = true
  appStore.fixedSidebar = true
  ElMessage.success('配置已重置并生效')
}
</script>

<style lang="scss" scoped></style>
